<style>
	#img_selector_tabs a{text-decoration:none;}
	#img_selector_tabs .tab_content{height:280px;}
	#img_selector_tabs .cate_list{float:left;width:130px;border-right:1px solid #AED0EA;height:280px;}
	#img_selector_tabs .cate_list li{line-height:22px;border-left:3px solid transparent;padding-left:5px;}
	#img_selector_tabs .cate_list li:hover{border-left-color:#666;background:#DDD;}
	#img_selector_tabs .cate_list li.selected{background:#DDD;border-left-color:#2694E8;}
	#img_selector_tabs .cate_list li.selected a{color:#2694E8;}
	#img_selector_tabs .pager{position: absolute;right: 10px;top: 11px;}
	#selected_img_dl{display: inline-block;height:92px;overflow: hidden;padding-right:8px;}
	#selected_img_dl dt{float:left;font-weight:bold;margin-right:10px;}
	#selected_img_dl dd{float:left;padding:2px;border:1px solid transparent;border-radius:4px;}
	#selected_img_dl dd:hover{border-color:#2694E8;background:white;box-shadow:0 1px 2px #2694E8 inset, 0 0 8px #2694E8;outline:0 none;}
</style>
<dl id="selected_img_dl">
	<dt>当前选中</dt>
	<dd class="no_pic">
		<img src="!{res file='images/no_pic.jpg' thumb=80x80}"/>
	</dd>
</dl>
<div class="tabs" id="img_selector_tabs">
	<ul>
		<li><a href="#local_img">本地上传</a></li>
		<li><a href="#web_img">网络图片</a></li>
		<li><a href="#remote_img">网站图片</a></li>
	</ul>
	<div id="local_img" class="tab_content">
		<div class="form_item">
			<strong>本地图片：</strong>
			<div><input type="button" class="image_uploader button" value="点击上传图片"/></div>
			<p>(点击上传图片)</p>
		</div>
	</div>
	<div id="web_img" class="tab_content">
		<div class="form_item">
			<strong>图片地址：</strong>
			<div><input class="text_input" type="text" name="image_url" value=""/></div>
			<p>(请输入网络图片的地址)</p>
		</div>
		<div class="form_item form_btn_item">
			<input class="button" type=button value="保存到本地" />
			<p>(保存到本地可以提高图片访问稳定性，但会占用网站空间！)</p>
		</div>
	</div>
	<div id="remote_img" class="tab_content">
		<ul class="cate_list">
			<li class="selected"><a href="javascript:void(0);" onclick="load_img_list('/index.php?app=image&act=file_list')">全部图片</a></li>
			!{foreach from=$cates item=cate}
			<li><a href="javascript:void(0);" onclick="load_img_list('/index.php?app=image&act=file_list&cate=!{$cate._id}')">!{$cate.name}</a></li>
			!{/foreach}
		</ul>
	</div>
</div>
<div class="form_item form_btn_item">
	<input class="button submit_btn" type=button value="确定" />
	<input class="button" type=button value="取消" onclick="destroy_dialog()"/>
</div>

<script>
function destroy_dialog(){
	$('#picture_selector').dialog('destroy');
}
$(function(){
	$('#picture_selector .form_btn_item .submit_btn').click(function(){
		var selected_imgs = [];
		$("#selected_img_dl dd img[img_id]").each(function(){
			var img_id = $(this).attr('img_id');
			var src = $(this).attr('src');
			selected_imgs[selected_imgs.length] = {
				'file_id' : img_id,
				'src' : src
			};
		});
		if(selected_imgs.length == 0){
			alert('未选择有图片！');return;
		}
		destroy_dialog();
		picture_selector_onselect(selected_imgs);
	});
	$("#picture_selector .button").button();
	$("#img_selector_tabs").tabs({
		create:function(){
			$(".image_uploader").ajax_upload({
				success : function(handle, json){
					json.data = json.data.replace(/^(.*\/)([^\/]*)$/img, "$1/80x80/$2");
					add_to_selected(json.file_id, json.data);
					$(handle).val('点击上传图片');
				}
			});
		},
		select:function(obj, tab){
			var index = tab.index;
			if($('#remote_img .image_list').length)return;
			if(index == 2){
				//加载网站图片
				load_img_list('/index.php?app=image&act=file_list');
			}
		}
	});	
	$("#remote_img .cate_list li a").click(function(){
		$('#remote_img .cate_list .selected').removeClass('selected');
		$(this).parents('li').addClass('selected');
	});
	
	//图片居中
	//$("#selected_img_dl dd img").auto_img();
});

function load_img_list(url){
	$.get(url, function(html){
		$("#remote_img .image_list,#remote_img .pager").remove();
		$("#remote_img").append(html);
	});
}

function add_to_selected(img_id, src){
	!{if $multiple eq 0}
	//如果是单选，删除原来的图片
	$("#selected_img_dl dd").remove();
	!{else}
	$("#selected_img_dl dd.no_pic").remove();
	!{/if}
	$("#selected_img_dl").append('<dd><img img_id="'+img_id+'" src="'+src+'"></dd>');
	$("#selected_img_dl dd img").auto_img({
		ready:function(obj){
			$(obj).item_deleter({
				del:function(img_wrap){
					$(img_wrap).parent().remove();
				}
			});
		}
	});
}
</script>